<!-- 列表 -->

<template>
	<uni-nav-bar color="#000" :fixed="true" background-color="#fff" status-bar left-icon="left" title="门票列表" @clickLeft="back" />
	<view class="content">
		<view class="content-item" v-for="(item, index) in state.goodList" :key="index" @click="toBuy(item.id)">
			<image :src="item.cover_img" mode="aspectFill"></image>
			<text class="text">{{item.name}}</text>
		</view>
	</view>
</template>


<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { ref, reactive, onMounted } from 'vue';
	import { goodsList } from '@/request/api/vip.js';
	
	const state = reactive({
		goodList: {}
	})

	onLoad((e) => {
		getDetailData()
	})
	
	
	// 门票列表
	const getDetailData = async () => {
		const resultData = await goodsList();
		state.goodList = resultData.data.list;
	}

	// 返回
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	
	// 票详情
	const toBuy = (id) => {
		uni.navigateTo({
			url: `./buyticket?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 20rpx;
		.content-item {
			height: 400rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			image {
				position: absolute;
				border-radius: 20rpx;
				overflow: hidden;
				top: 0;
				left: 0;
				width: 100%;
				height: 400rpx;
			}
			.text {
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
				color: #fff !important;
			}
		}
	}
</style>